{% macro render_sidebar_item(item) %}
<li class="sidebar-item sidebar-group-item  {% if item.route == current_route %}sidebar-item-active{% endif %}" data-type="{{item.type}}" data-name="{{item.name}}" data-title="{{item.title or item.name}}"
	data-group-name="{{item.group_name or 'sidebar-item'}}" data-route="{{ item.route }}">
	<div>
		<a class="text-sm sidebar-group-item-title"
		href="/{{ item.route }}">
			{{ item.title or item.name }}
		</a>
	</div>
</li>
{% endmacro %}

{% macro render_sidebar_items(sidebar_items) %}
{%- if sidebar_items | len > 0 -%}
<ul class="list-unstyled sidebar-group-list" style="min-height: 20px;">
	{% for sidebar_group in sidebar_items -%}
	<li class="sidebar-group" data-type="Wiki Sidebar" data-title="{{sidebar_group}}">
		<div class="sidebar-group-container collapsible">
			<span class='sidebar-group-title'>{{ sidebar_group }}</span>
			<span class='add-sidebar-page hide' data-group-name="{{ sidebar_group }}" data-toggle="tooltip"
				data-placement="top" title="New Wiki Page in the group {{ sidebar_group }}">
				<svg xmlns="http://www.w3.org/2000/svg" width="16" height="20" viewBox="0 0 24 24" fill="none"
					stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
					class="feather feather-plus">
					<line x1="12" y1="5" x2="12" y2="19"></line>
					<line x1="5" y1="12" x2="19" y2="12"></line>
				</svg>
			</span>
			<span
				class='drop-icon {% if collapse_sidebar_groups and sidebar_group != active_sidebar_group %}rotate{% endif %}'>
				<svg viewBox="0 0 24 24" width="16" height="16" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round" class="css-i6dzq1"><polyline points="6 9 12 15 18 9"></polyline></svg>
			</span>
		</div>
		<ul class="list-unstyled sidebar-group-item-list {% if collapse_sidebar_groups and sidebar_group != active_sidebar_group %}hidden{% endif %}"
			style="min-height: 20px;">
			{% for item in sidebar_items[sidebar_group] -%}
			{{ render_sidebar_item(item) }}
			{%- endfor %}
		</ul>
	</li>
	{%- endfor %}
</ul>
<div class="d-none d-lg-block sidebar-options">
	<div class="sidebar-edit-mode-btn text-muted" data-toggle="tooltip" data-placement="top"
		title="Changes to sidebar will be automatically saved">
		<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none"
			stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
			class="feather feather-edit-3">
			<path d="M12 20h9"></path>
			<path d="M16.5 3.5a2.121 2.121 0 0 1 3 3L7 19l-4 1 1-4L16.5 3.5z"></path>
		</svg>
		<span class="small">Edit Sidebar</span>
	</div>
	<div class="add-sidebar-group text-muted hide">
		<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none"
			stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
			class="feather feather-plus">
			<line x1="12" y1="5" x2="12" y2="19"></line>
			<line x1="5" y1="12" x2="19" y2="12"></line>
		</svg>
		<span class="small">Add Group</span>
	</div>
	<div class="sidebar-view-mode-btn text-muted hide">
		<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none"
			stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
			class="feather feather-sidebar">
			<rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect>
			<line x1="9" y1="3" x2="9" y2="21"></line>
		</svg>
		<span class="small">View Sidebar</span>
	</div>
</div>
{%- endif -%}
{% endmacro %}

{% macro my_account() %}
<ul class="list-unstyled management">
	<li class="sidebar-item">
		<a class='new-wiki-page text-muted' href="placeholder_link">{{ _("Add a new page") }}</a>
	</li>
</ul>
{% endmacro %}

<div class="web-sidebar" data-name="{{wiki_search_scope}}">
	<div class="sidebar-items">
		{{ render_sidebar_items(sidebar_items) }}
	</div>
</div>